<template>
  <div>
    <el-form ref="form" inline :model="form" label-width="120px">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="姓名:" prop="userName">
            <el-input
              v-model="form.userName"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="人员编号:" prop="uid">
            <el-input
              v-model="form.uid"
              placeholder="请输入人员编号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="专兼职:" prop="isFullTime">
            <el-select style="width: 100%" v-model="form.isFullTime">
              <el-option label="专职" value="1"></el-option>
              <el-option label="兼职" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="区划地址:" prop="regionalAddress">
            <el-select style="width: 100%" v-model="form.regionalAddress">
              <el-option
                v-for="(item, index) in provinces"
                :key="index"
                :label="item"
                :value="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="handleSearchClk"
              >搜索</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="handleDownloadClk"
              >批量导出</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="handleReset"
              >清空</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <div class="train-total">在职：{{ total }}</div>
      <el-table border :data="tableData" style="width: 95%" max-height="400">
        <el-table-column prop="id" label="人员编号" align="center" />
        <el-table-column prop="userName" label="姓名" align="center" />
        <el-table-column prop="sex" label="性别" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.sex === "1" ? "男" : "女" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="联系手机" align="center" />
        <el-table-column
          prop="regionalAddress"
          label="区划地址"
          align="center"
        />
        <el-table-column prop="isFullTime" label="专兼职" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.isFullTime === "1" ? "专职" : "兼职" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="idNo" label="身份证号码" align="center" />
        <el-table-column prop="mark" label="备注" align="center" />
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.prevent="handleEdit(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageInfo.pageSize"
        :total="pageInfo.total"
        @current-change="handleChangeCurrent"
      />
    </div>
    <el-dialog title="培训登记" :visible.sync="visible" width="30%">
      <div class="dialog-row">
        姓名：
        <el-input
          style="width: 50%"
          v-model="currentInfo.userName"
          :disabled="true"
        />
      </div>
      <div class="dialog-row">
        企业名称：
        <el-input style="width: 50%" v-model="trainForm.companyName" />
      </div>
      <div class="dialog-row">
        开始时间：
        <el-date-picker v-model="trainForm.startDate" type="date" size="mini">
        </el-date-picker>
      </div>
      <div class="dialog-row">
        结束时间：
        <el-date-picker v-model="trainForm.endDate" type="date" size="mini">
        </el-date-picker>
      </div>
      <div class="dialog-row">
        备注：
        <el-input style="width: 50%" v-model="trainForm.remarks" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleDialogConfirem"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getPersonnel } from "../../api/personnel";
import { addTrain, getTrainDownload } from "../../api/train";

export default {
  name: "HrTrain",
  data() {
    return {
      provinces: [
        "河北省",
        "山西省",
        "辽宁省",
        "吉林省",
        "黑龙江省",
        "江苏省",
        "浙江省",
        "安徽省",
        "福建省",
        "江西省",
        "山东省",
        "河南省",
        "湖北省",
        "湖南省",
        "广东省",
        "广西壮族自治区",
        "海南省",
        "四川省",
        "贵州省",
        "云南省",
        "西藏自治区",
        "陕西省",
        "甘肃省",
        "青海省",
        "宁夏回族自治区",
        "新疆维吾尔自治区",
        "北京市",
        "天津市",
        "上海市",
        "重庆市",
        "台湾省",
        "香港",
        "澳门",
      ],
      total: 0,
      form: {
        userName: "",
        uid: "",
        isFullTime: "",
        regionalAddress: "",
      },
      tableData: [
        {
          id: "",
          userName: "",
          sex: "",
          phone: "",
          regionalAddress: "北京市",
          isFullTime: "",
          idNo: "",
          mark: "",
        },
      ],
      pageInfo: {
        current: 1,
        pageSize: 10,
      },
      visible: false,
      currentInfo: {},
      trainForm: {
        uid: 0,
        userName: "",
        companyName: "",
        startDate: "",
        endDate: "",
        remarks: "",
      },
    };
  },
  created() {
    this.getPersonList();
  },
  methods: {
    async getPersonList() {
      const { current, pageSize } = this.pageInfo;
      const res = await getPersonnel({ ...this.form, current, pageSize });
      const { data, pageInfo } = res?.data;
      this.tableData = data;
      this.pageInfo = pageInfo;
      this.total = pageInfo.total;
    },
    handleChangeCurrent(index) {
      this.pageInfo.current = index;
    },
    handleReset() {
      this.$refs["form"].resetFields();
      this.getPersonList();
    },
    handleEdit(info) {
      this.visible = true;
      this.currentInfo = info;
    },
    async handleDialogConfirem() {
      this.trainForm.userName = this.currentInfo.userName;
      let startDate = new Date(this.trainForm.startDate);
      this.trainForm.startDate = startDate.getTime();
      let endDate = new Date(this.trainForm.endDate);
      this.trainForm.endDate = endDate.getTime();
      this.trainForm.uid = this.currentInfo.id;
      const res = await addTrain(this.trainForm);
      const { data } = res;
      if (data.code === 0) {
        this.$message({
          message: "登记成功",
          type: "success",
        });
        this.getPersonList();
      } else {
        this.$message({
          message: "登记失败",
          type: "error",
        });
      }
      this.visible = false;
    },
    handleSearchClk() {
      this.getPersonList();
    },
    async handleDownloadClk() {
      const options = {
        responseType: "blob",
      };
      const res = await getTrainDownload({}, options);
      let url = window.URL.createObjectURL(new Blob([res.data]));

      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      let filename = "培训记录" + ".xlsx";
      link.setAttribute("download", filename);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    handleCancel() {
      this.visible = false;
      this.trainForm = {
        uid: 0,
        userName: "",
        companyName: "",
        startDate: "",
        endDate: "",
        remarks: "",
      };
    },
  },
};
</script>
<style lang="less" scoped>
.train-total {
  margin-bottom: 10px;
}
.dialog-row {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.dialog-row:first-child {
  margin-top: 0px;
}
</style>
